<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<title>后台管理</title>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
		
		<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.3.8/css/fileinput.min.css" rel="stylesheet"/>
		<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css"/>
		
		<link rel="stylesheet" type="text/css" th:href="@{/css/backindex.css}"/>
		
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body th:inline="text">
		<div class="leftslidebar" th:fragment="leftbar">
			<h3 class="brand"><img th:src="@{/img/logomanager.png}" class="logo"/>FaceFun</h3>
			<ul class="nav nav-stacked">
			  <li role="presentation" class="active"><a th:href="@{/admin/cartoon}"><span class="glyphicon glyphicon-picture"></span>&nbsp;&nbsp;漫画管理</a></li> 
			  <li role="presentation"><a th:href="@{/admin/user}"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;用户管理</a></li>
			</ul>
		</div>

		<div class="content">
			<nav th:fragment="navbar" class="navbar navbar-default" role="navigation" >
			  <div class="navbar-header">
		       	<a class="navbar-brand" id="menubutton"><span class="glyphicon glyphicon-indent-left"></span></a>
		      </div>
			  <div class="navbar-right">
			  	<a th:href="@{/admin/cartoon}" class="navbar-brand"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;[[${session.admin.name}]]</a>
				<ul class="nav navbar-nav">
					<li>
						<a>|</a>
					</li>
					<li>
						<a href="#" class="glyphicon glyphicon-cog"></a>
					</li>
					<li>
						<a th:href="@{/admin/exit}" class="glyphicon glyphicon-off"></a>
					</li>
				</ul>
			  </div>	
			</nav>
			
			<ol class="breadcrumb">
			  <li class="active">漫画管理</li>
			</ol>
			
			
			<div class="well">

				<div class="btns">
					<a class="btn btn-success " th:href="@{/admin/cartoon/editor}"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;新增</a>
				</div>

				<div class="panel panel-default">
					<div class="panel-body">
						<div class="form-inline searchbar">
							<div class="form-group">
								<label for="">漫画名称：</label>
								<input type="text" class="form-control" id="ctNameSelect"/>
							</div>
							<div class="form-group">
								<label for="">漫画类型：</label>
								<select id="typicSelect" class="form-control">
									<option value="0"></option>
									<option th:each="t:${types}" th:value="${t.id}">[[${t.name}]]</option>
								</select>
							</div>
							<div class="form-group">
								<label for="">进度：</label>
								<select id="statuSelect" class="form-control">
									<option value=""></option>
									<option value="1">完结</option>
									<option value="0">连载中</option>
								</select>
							</div>
							<button id="query" class="btn btn-primary">查询</button>
						</div>
					</div>
				</div>
				
				<div class="panel panel-default">
					<div class="panel-body">
						<table id="example" class="table table-hover" cellspacing="0" width="100%">
							<thead>
								<tr>
									<th>漫画头像</th>
									<th>漫画名称</th>
									<th>类型</th>
									<th>作者</th>
									<th>漫画状态</th>
									<th>人气</th>
									<th>上架时间</th>
									<th>操作</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
				
			</div>

		</div>
		

		
		<div id="Modal" class="modal fade">
		 
		</div>
		
		<!-- jQuery -->
		 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

		<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js" type="text/javascript"></script>

		<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js" type="text/javascript"></script>

		
		<script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js" type="text/javascript"></script>
		
		<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.3.8/js/fileinput.min.js"></script>
		
		<script th:src="@{/js/backindex.js}" type="text/javascript"></script>
		
		
		<script type="text/javascript">
		var table;
		$(document).ready(function() {
		    
		    table=$('#example').DataTable({
		    	"language":  {
		    		"url":"/js/zh.json"			
		        },		
		        "dom":"lrtip",
		    	"ordering":false,
				"pagingType": "simple_numbers",
				 "serverSide": true,
		        "ajax": {
		        	"url":"/cartoon/list",
		        	"type":"POST",
		        	"dataType": "json"},
		        "columns": [
		        	{ "data": "img",
		              "render": function ( data) {
		            	
		                    return '<img src="'+data+'" width="150px" alt="no Image"/>';
		                }
			        },
		            { "data": "name",
		            	"render": function (data, type, full, meta) {
		                    return '<a href="/admin/chaptor?ctId='+full.id+'">'+data+'</a>';
		                }
			        },
		            { "data": "tpId",
			        	render:function (data, type, full, meta) {
			        		return full.tpName;
			        	}
		            },
		            { "data": "author" },
		            { "data": 'statu',
		            	render:function(d){
		            		return d?"完结":"连载中"
		            	}
		            },
		            { "data": "score" },
		            { "data": "shelfDate"},
		            { "data": "id",
		              "render": function ( data) {
		            	  
		                    return '<a href="/admin/cartoon/editor?id='+data+'">修改</a><br/>'
		                    +'<a class="deletebtn" href="#Modal" data-id="'+data+'" data-toggle="modal">删除</a>'
		                    
		                }
			        }]
		    });
		    
		    $('#query').click(function(){
		    	table.column(2).search($('#typicSelect').val())
		    		 .column(1).search($('#ctNameSelect').val())
		    		 .column(4).search($( '#statuSelect').val()).draw()
		    })
		
		    $('#Modal').on('show.bs.modal', function (event) {
		    	var button = $(event.relatedTarget)
		    	$(this).empty().append('<div class="modal-dialog modal-sm" ><div class="modal-content">'
			      +'<div class="modal-header">'
			      +'<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>'
			      +'<h3>温馨提示</h3></div>'
			      +'<div class="modal-body">'
			      +'<p class="text-center">确认删除该漫画</p></div>'
			      +'<div class="modal-footer">'
			      +'<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>'
			      +'<button type="button" class="btn btn-danger" onclick="javascript:deleteCartoon('+button.data('id')+')">删除</button>'
			      +'</div></div></div>')
		    });
		    
		} );
			
			
			function deleteCartoon(id){
				$.ajax({
			 		url: '/cartoon',
			 		type: 'POST',
			 		data: {
			 			_method: 'DELETE',
			 			id:id
			 		}
			 	})
			 	.done(function() {
			 		table.draw();
			 		$('#Modal').modal('hide')
			 	})
			 	.fail(function() {
			 		console.log("error");
			 	})
			}
		</script>
	</body>
</html>